import { ReactNode, useMemo } from 'react'
import { Badge, Button, Dropdown, Space, Tabs } from 'antd'
import { EditOutlined, PlusOutlined, ReloadOutlined } from '@ant-design/icons'

import { useBoundStore } from '../../store'
import { getTabIdName, popupSlot } from '../../utils'
import { BatchOperationsDrawer } from '../BatchOperationsDrawer'
import { TOperationType } from '../BatchOperationsDrawer/interface'
import styles from '../../styles.module.less'

const buttonListConfig = [
  {
    key: 'updateServiceLevel',
    label: '编辑服务等级',
  },
  {
    key: 'updateFirstLine',
    label: '编辑头程信息',
  },
  {
    key: 'updateTailLines',
    label: '编辑尾程信息',
  },
]
export const Header = () => {
  const tabId = useBoundStore(v => v.reqData.tabId)
  const setReqData = useBoundStore(v => v.setReqData)
  const getData = useBoundStore(v => v.getData)
  const gridRef = useBoundStore(v => v.gridRef)
  const tabCount = useBoundStore(v => v.tabCount)
  const getTabCount = useBoundStore(v => v.getTabCount)
  const selectedKeys = useBoundStore(v => v.selectedKeys)

  const tabItems = useMemo<{ label: ReactNode; key: string }[]>(
    () =>
      getTabIdName.valueList
        .map(v => ({ label: getTabIdName(v), key: String(v) }))
        .map(({ label, key }) => ({
          label: (
            <Space>
              {label}
              <Badge
                count={tabCount.find(v => v.tabId?.toString() === key)?.count ?? 0}
                className={String(tabId) === key ? styles.activeTabCount : styles.tabCount}
              />
            </Space>
          ),
          key,
        })),
    [tabCount],
  )

  const openDrawer = (type: TOperationType) => {
    BatchOperationsDrawer.open({
      operationType: type,
      onSuccess: () => {
        setReqData({ page: 1 })
        getData(true)
      },
    })
  }

  return (
    <div className={styles.main_header}>
      <div className={styles.main_header_left}>
        <Tabs
          destroyInactiveTabPane
          onChange={v => {
            gridRef.current?.api?.ensureIndexVisible(0, 'top')
            setReqData({ tabId: Number(v) })
            getData(true)
          }}
          activeKey={String(tabId)}
          items={tabItems}
          tabBarExtraContent={
            <Space>
              <Button
                type="primary"
                disabled={selectedKeys.length === 0}
                icon={<PlusOutlined />}
                onClick={() => openDrawer('addEventTemplate')}
              >
                添加轨迹
              </Button>
              <Dropdown
                disabled={selectedKeys.length === 0}
                menu={{
                  items: buttonListConfig,
                  onClick: ({ key }) => openDrawer(key as TOperationType),
                }}
              >
                <Button icon={<EditOutlined />} disabled={selectedKeys.length === 0}>
                  批量操作
                </Button>
              </Dropdown>
              <Button
                type="default"
                icon={<ReloadOutlined />}
                onClick={() => {
                  setReqData({ page: 1 })
                  getData(true)
                }}
              >
                刷新
              </Button>
            </Space>
          }
        />
      </div>
      <popupSlot.Slot />
    </div>
  )
}
